<template>
	<view>
		<view class="swiper">
			<u-swiper :list="imagesList" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
				bgColor="#ffffff"></u-swiper>
		</view>
		<view class="menu">
			<u-grid :border="false" @click="click">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-image :src="baseListItem.src" width="50" height="50"></u-image>
					<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon> -->
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<u-divider></u-divider>
		<view class="containerList">
			<u-row style="margin-right: 20px;">
				<u-col span="4">
					<view style="padding-left: 30px;">
						<u-image src="/static/menuIcon/course2.png" width="50" height="50"></u-image>
						<text class="grid-text">全部课程</text>
					</view>
				</u-col>
				<u-col span="8">
					<view style="padding-right: 10px;">
						<u-row gutter="10">
							<u-col span="6"><u-button type="primary">语文</u-button></u-col>
							<u-col span="6"><u-button type="error">数学</u-button></u-col>
						</u-row>
						<view style="margin-top: 5px;">
							<u-row gutter="10">
								<u-col span="6"><u-button type="warning ">英语</u-button></u-col>
								<u-col span="6"><u-button type="success">其他</u-button></u-col>
							</u-row>
						</view>

					</view>

				</u-col>
			</u-row>

			<view class="teacherItem">

				<u-row>
					<u-col :span="4">
						<view style="width: 60px;margin-left: 20px">
							<u-button type="primary" icon="search" size="mini">搜索</u-button>
						</view>
					</u-col>
					<u-col :span="4" offset="4">
						<view style="width: 70px;margin-left:50px">
							<u-button icon="reload"size="mini" :hairline="false" >换一批</u-button>
						</view>
					</u-col>
				</u-row>
				
				<u-row>
					<u-col :span="3">
						<view style="margin-left: 20px;margin-top: 10px;">
							<u-image src="/static/avatar/touxiang1.jpg" width="80" height="80" shape="circle"></u-image>
						</view>
					</u-col>
					<u-col :span="6">
						<view style="margin-left: 10px;">
							<text style="font-size: 25px;">张敬轩</text>
							<view style="padding-top: 5px; display: flex;">
								<u-tag text="语文"></u-tag>
								<view class="ml-5">
									<u-tag text="数学"></u-tag>
								</view>
							</view>
						</view>
					</u-col>
					<u-col :span="1" offset="1">
						<view class="ml-20">
							<u-icon name="arrow-rightward"></u-icon>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col :span="3">
						<view style="margin-left: 20px;margin-top: 10px;">
							<u-image src="/static/avatar/touxiang2.png" width="80" height="80" shape="circle"></u-image>
						</view>
					</u-col>
					<u-col :span="6">
						<view style="margin-left: 10px;">
							<text style="font-size: 25px;">张敬轩</text>
							<view style="padding-top: 5px; display: flex;">
								<u-tag text="语文"></u-tag>
								<view class="ml-5">
									<u-tag text="数学"></u-tag>
								</view>
							</view>
						</view>
					</u-col>
					<u-col :span="1" offset="1">
						<view class="ml-20">
							<u-icon name="arrow-rightward"></u-icon>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col :span="3">
						<view style="margin-left: 20px;margin-top: 10px;">
							<u-image src="/static/avatar/touxiang3.jpg" width="80" height="80" shape="circle"></u-image>
						</view>
					</u-col>
					<u-col :span="6">
						<view style="margin-left: 10px;">
							<text style="font-size: 25px;">张敬轩</text>
							<view style="padding-top: 5px; display: flex;">
								<u-tag text="语文"></u-tag>
								<view class="ml-5">
									<u-tag text="数学"></u-tag>
								</view>
							</view>
						</view>
					</u-col>
					<u-col :span="1" offset="1">
						<view class="ml-20">
							<u-icon name="arrow-rightward"></u-icon>
						</view>
					</u-col>
				</u-row>
				
				<view class="mt-20">
					<u-image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" width="100%" height="150px"></u-image>
				</view>
			</view>
		</view>
	</view>




</template>

<script>
	export default {
		data() {
			return {
				imagesList: [
					// "/static/images/swiper1.jpg"
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				baseList: [{
						src: '/static/menuIcon/course.png',
						title: '全部课程'
					},
					{
						src: '/static/menuIcon/teacher.png',
						title: '讲师风采'
					},
					{
						src: '/static/menuIcon/record.png',
						title: '预约打卡'
					},
				],
				indexList: [{
						url: 'https://cdn.uviewui.com/uview/album/1.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/2.jpg'
					},
					{
						url: 'https://cdn.uviewui.com/uview/album/3.jpg'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.menu {
		margin-top: 20px;
	}

	.grid-text {
		font-size: 12px;
		margin-top: 5px;
		color: dimgray;
	}

	.teacherItem {
		margin-top: 30px;
	}
</style>